<template>
    <div class="put-activity-list">
        <div class="content">
            <div class="add-btn clear-both">
                <el-button class="float-right btn" type="danger"  @click="toSetUp">新建推送</el-button>
            </div>
            <div class="table-div"  v-loading="loadingChoose">
                <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%">
                    <el-table-column prop="push_rule" label="规则名称"> </el-table-column>
                    <el-table-column label="关联活动 ">
                        <template slot-scope="scope">   
                            <div slot="reference" class="name-wrapper">
                                <el-tag close-transition>{{scope.row.act_name ? scope.row.act_name : '未关联'}}</el-tag>
                            </div>    
                        </template>
                    </el-table-column>
                    <el-table-column prop="platform" label="推送平台 " align="center">  </el-table-column>
                    <el-table-column prop="created_at" label="创建时间 " align="center"> </el-table-column>
                    <el-table-column prop="type" label="推送渠道 " align="center"> </el-table-column>
                    <!-- <el-table-column prop="created_at" label="目标用户 " > </el-table-column> -->
                    <el-table-column prop="tag" label="状态 " align="center"> </el-table-column>
                    <el-table-column prop="" label="操作 " width="120" align="center">
                        <template slot-scope="scope">
                            <!-- <el-button style="margin-right:10;" @click="editClick(scope.row)" type="text" size="small">编辑</el-button> -->
                            <el-button style="margin-left:0;margin-right:10;" @click="showDelete(scope.row)" type="text" size="small">删除</el-button>  
                        </template>
                    </el-table-column>
                </el-table>
               

                <div class="text-center bg-white" v-show="tableData.length==0">
                    您还没有创建推送消息？<a @click="toSetUp" class="cursor">去创建一个</a>
                </div>
            </div>
            <div class="paging-num text-center">
                <el-pagination
                small
                layout="prev, pager, next"
                :total="total"
                @current-change="pageChange">
                </el-pagination>
            </div>
        </div>

        <!-- 删除提示框 -->
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            size="tiny"
            :before-close="handleClose">
            <span>确定要删除吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteClick">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
	import * as api from './../api/api';
export default {
    data(){
        return {
            searchValue:'', //搜索
            tableData: [],
            loadingChoose:false,  //加载中
            selectListShow:false,
            searchInput:'', //搜索
            current_page:1, //当前页码
            last_page:'',//最后一页
            limit:10, //一页显示多少条
            total:0, //总条数
            dialogVisible:false,//弹框控制
            deleteId:''//删除id
        }
    },
    mounted(){
        this.fetchList();
    },
    computed: {

    },
    methods: {
        fetchList(){
            let vm = this;
            vm.loadingChoose=true;
            let body={
                limit:vm.limit,
                start:(parseInt(vm.current_page)-1)*parseInt(vm.limit)
            };
            api.getPushList(body).then(res=>{
                vm.loadingChoose=false;
                if(res.data.code==0){
                    res.data.data.forEach((item,index)=>{
                       //状态
                        if(item.push_status==1){
                            item.tag='成功';
                        }else if(item.push_status==2){
                            item.tag='失败';
                        }else if(new Date(item.begin_time)<new Date()){
                            item.tag='未开始';
                        }else if(new Date(item.end_time)<new Date()){
                            item.tag='已结束';
                        }
                        //推送渠道
                        if(item.push_type==1){
                            item.type='极光推送'
                        }
                    });
                    vm.tableData=res.data.data;
                    vm.total=res.data.data.length;
                }
            }).catch(function (err) {
                vm.loadingChoose=false;
            });
        },
        //点击当前的页数
        pageChange(a){
            this.current_page=a;
            this.fetchList();
        },
        //新建
        toSetUp(){
            this.$router.push({name:'pushNew'})
        },
        //删除
        showDelete(data){
            this.dialogVisible = true;
            this.deleteId = data.id;
        },
        deleteClick(){
            // console.log(this.deleteId)
            this.dialogVisible = false;
            let id = {id:this.deleteId};
            api.deletePush(id).then(res=>{
                if(res.data.code==200){
                    this.fetchList();
                }
            })
        },
        //编辑
        editClick(a){
            this.$router.push({name:'pushNew',query:{trgNo:a.id}})
        },
        //修改投放状态
        actionClick(item,val){
            let vm = this;
            let body={
                id:item.id,
                status:val
            };
            api.editTriggerState(body).then(res=>{
                if(res.data.code==0){
                    vm.$message({
                        message: res.data.message,
                        type: 'success'
                    });
                    vm.fetchList();
                }
            });
        },
        //删除弹框
        handleClose(done) {           
                done();
        }
    }
    
}
</script>
<style lang="less">
.el-table--enable-row-transition .el-table__body td{
    font-size: 12px;
}
</style>


<style lang="less" scoped>
.put-activity-list{
    height:100%;
    width:100%;
    background:#fff;
    padding:40px;
    box-sizing:border-box;
    overflow-y:auto;
    .content{
        min-width:1020px;
    }
    .table-div{
        position:relative;
        .state-select{
            width:100px;
            position:absolute;
            top:40px;
            right:120px;
            background:#F4F8FB;
            p{
                height:40px;
                line-height:40px;
                padding-left: 18px;
                padding-right: 18px;
                color:#999;
                &:hover{
                    background:#EEF1F6;
                    color:#333;
                }
            }
        }
    }
    
    .add-btn{
        margin-bottom:20px;
        .search-box{
            width:238px;
            display:inline-block;
        }
        .btn{
            border-radius:20px;
            padding: 8px 25px;
        }
    }
    .paging-num{
        margin:20px;
    }
    .bg-white{
        padding:30px 0;
        color:#888;
        a{
            color: #ec5463;
            text-decoration: none;
        }
    }
}
</style>
